<template>
  <div class="app-container">

    <u-page title="仓库租赁排期表">
      <div style="margin-bottom: 20px">
        <el-alert title="温馨提示" type="success" show-icon :closable="false">
          <span style="font-weight: bold; font-size: 12px;">该排期表红色格表示仓位已被占用，绿色格表示仓位空闲中可以申请使用，黄色表格表示仓位超期需及时归还钥匙。</span>
        </el-alert>
      </div>

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="楼层" prop="floor">
            <el-select v-model="listQuery.floor" placeholder="请选择楼层" clearable>
              <el-option v-for="item in floors" :label="item.code" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="选择月份" prop="inputMonth">
            <el-date-picker
              v-model="listQuery.inputMonth"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择月"
              @change="cal()"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>
      <table v-if="paiqiStr!==''" v-html="paiqiStr" />
      <div style="margin-top: 20px">
        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left" @click="handleLastMonth">上月</el-button>
          <el-button type="primary" @click="handleNextMonth">次月<i class="el-icon-arrow-right el-icon--right" /></el-button>
        </el-button-group>
      </div>
    </u-page>
  </div>
</template>
<script>
export default {
  data() {
    return {
      api: this.$u.api.OpcenWhsite,
      dataapi: this.$u.api.OpcenMaintain,
      // 楼层
      floors: [],
      // 排期表格
      paiqiStr: '',
      statusList: [{ value: 0, label: '启动中' }, { value: 1, label: '已过期' }],
      listLoading: false,
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      listQuery: {
        page: 1,
        pageSize: 20,
        totalCount: 1,
        inputMonth: '',
        days: '',
        floor: '',
        adtype: '',
        status: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()])
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  mounted() {
    this.getFloors()
  },
  methods: {
    // 加载楼层
    getFloors() {
      const self = this
      self.dataapi.floors().then(res => {
        this.floors = res.data
      })
    },
    // 搜索事件
    handleFilter() {
      if (this.listQuery.inputMonth === '') {
        this.$message.warning('请选择时间！')
        return
      }
      if (this.listQuery.floor === '') {
        this.$message.warning('请选择楼层！')
        return
      }
      this.hdlFilter()
    },
    // 日期选择后计算当月天数
    cal() {
      var yearNum = parseInt(this.listQuery.inputMonth.split('-')[0])
      var monthNum = parseInt(this.listQuery.inputMonth.split('-')[1])
      let flag = 0
      flag = yearNum % 4 === 0 && yearNum % 100 !== 0 || yearNum % 400 === 0
      switch (monthNum) {
        case 1: case 3: case 5: case 7: case 8: case 10: case 12:
          this.listQuery.days = 31
          break
        case 4: case 6: case 9: case 11:
          this.listQuery.days = 30
          break
        case 2:
          if (flag) { this.listQuery.days = 29 } else { this.listQuery.days = 28 }
          break
      }
    },
    // 查询上一个月
    handleLastMonth() {
      if (this.listQuery.inputMonth !== '') {
        const selectedMonth = new Date(this.listQuery.inputMonth)
        selectedMonth.setMonth(selectedMonth.getMonth() - 1)
        const formattedMonth = selectedMonth.toISOString().slice(0, 7)
        this.listQuery.inputMonth = formattedMonth
        this.cal()
        this.hdlFilter()
      } else {
        this.$message.warning('请选择月份！')
      }
    },
    // 查询下一个月
    handleNextMonth() {
      if (this.listQuery.inputMonth !== '') {
        const selectedMonth = new Date(this.listQuery.inputMonth)
        selectedMonth.setMonth(selectedMonth.getMonth() + 1)
        const formattedMonth = selectedMonth.toISOString().slice(0, 7)
        this.listQuery.inputMonth = formattedMonth
        this.cal()
        this.hdlFilter()
      } else {
        this.$message.warning('请选择月份！')
      }
    },
    /**
     * 查询事件
     */
    hdlFilter() {
      this.listQuery.page = 1
      this.hdlList()
    },
    /**
     * 获取列表数据
     */
    hdlList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      self.api.whpaiqi(self.listQuery).then(res => {
        // 获取分页列表数据
        self.paiqiStr = res.data
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    }
  }
}
</script>
<style>
.el-select .el-input {
  width: 220px;
}
</style>
<style lang="scss" scoped>
.app-container{
  .item >>> .el-form-item__content {
    display: flex;
  }
  .status {
    ::v-deep{
      .el-input{
        width: 140px;
      }
    }
  }
  ::v-deep{
    .el-table-expand {
      font-size: 0;

      label {
        width: 90px;
        color: #99a9bf;
        font-size: 12px;
      }

      .el-form-item{
        margin-bottom: 2px;
        margin-right: 0;
        vertical-align: top;
      }

      .el-form-item__content {
        margin-right: 0;
        margin-bottom: 0;
        font-size: 12px;
        display: inline-block;
        vertical-align: top;
        position: relative;
      }
    }
    .guanggao1{
      border:1px solid;
      cursor:hand;
      height:18px;
      width:25px;
      background-color:#00ff00;
    }
    .guanggao2{
      border:1px solid;
      cursor:hand;
      height:18px;
      width:220px;
    }
    .guanggao3{
      border:1px solid;
      cursor:hand;
      height:18px;
      width:25px;
      background-color:#FF0000;
    }
    .guanggao4{
      border:1px solid;
      cursor:hand;
      height:18px;
      width:25px;
    }
    .guanggao5{
      border:1px solid;
      cursor:hand;
      height:18px;
      width:25px;
      background-color:#ee9900;
    }
    .guanggao6{
      border:1px solid;
      cursor:hand;
      height:18px;
      width:120px;
    }
  }
}
</style>
